<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<!--样式引入文件，不动它！！！-->

		<style>
			.fhtableini {
				height: 120px;
				width: 180px;
				margin: 10px;
				background-color: #761C19;
				display: inline-table;
				vertical-align: top;
				z-index: 999999;
			}
			.titelfont{
				font-size: 50px ;
				color: #ADADAD;
			}
		</style>
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<title></title>
	</head>

	<body>
	<!-- 导航栏 -->
	<!-- 导航栏 -->
	<!-- 导航栏 -->
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<div id="顶部栏" style="height: 150px;width: 100%;background-color: powderblue;position: fixed;top: 0px; z-index:999998">
			<div id="fhtable" style="height: 160px; overflow-y:hidden ; overflow-x:hidden; white-space: nowrap;">
				<div id="fhtablenei">
					<div id="首页" class="fhtableini titelfont">首页</div>
					<div id="新闻" class="fhtableini titelfont">新闻</div>
					<div id="关于" class="fhtableini titelfont">关于</div>
					<div id="联络" class="fhtableini titelfont">联络</div>
					<div id="页面1" class="fhtableini titelfont">页面1</div>
					<div id="页面2" class="fhtableini titelfont">页面2</div>
					<div id="页面3" class="fhtableini titelfont">页面3</div>
					<div id="页面4" class="fhtableini titelfont">页面4</div>
					<div id="页面5" class="fhtableini titelfont">页面5</div>
					<div id="页面6" class="fhtableini titelfont">页面6</div>
					<div id="页面7" class="fhtableini titelfont">页面7</div>
					<div id="页面8" class="fhtableini titelfont">页面8</div>

				</div>
				
		</div>

			
		</div>
		
		<div class="embed-responsive embed-responsive-16by9" style="width:87%;top: 150px;left: 13%;">
		
		
			<iframe style="background-color: #1B6D85" class="embed-responsive-item" src="domodeindex"></iframe>
		</div>
		<div id="侧边栏" class="listtext" style="height: 100vh;width:13% ;background-color: cornsilk;position: absolute;position: fixed;top: 150px; z-index:999998">
			<div class="border" style="top: 150px;">左边组件栏</div>
			<div class="border" style="top: 150px;">左边组件栏</div>
			<div class="border" style="top: 150px;">左边组件栏</div>
			<div class="border" style="top: 150px;">左边组件栏</div>
		</div>
	</body>
	<script>
/* <<<<<<< HEAD */
	$( "#modeidex" ).load( "domodeindex");

	$("#fhtablenei").each(function(index, element) {
		element.onwheel = function(event) {
			var table = $(element).parents("#fhtable");
			var right = $(element).outerWidth(true);
			if(table.scrollLeft() < right && event.deltaY > 0) {
				//禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
				event.preventDefault();
				var left = (table.scrollLeft() + 50);
				table.scrollLeft(left)
			}
			if(table.scrollLeft() > 0 && event.deltaY < 0) {
				//禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）  
				event.preventDefault();
				var left = (table.scrollLeft() - 50);
				table.scrollLeft(left)
			}
		}
	})
	$("#首页").on("click",function(){
		$( "#hello" ).load( "new", function( response, status, xhr ) {
		})	
	$("#新闻").on("click",function(){
		$( "#idex" ).load( "new", function( response, status, xhr ) {
		});
	})
	$("#关于").on("click",function(){
		$( "#idex" ).load( "about", function( response, status, xhr ) {
		});
	})
	$("#联络").on("click",function(){
		$( "#idex" ).load( "talk", function( response, status, xhr ) {
		});
	})  
	
	</script>

</html>